<template>
	<view style="background-color: transparent;">
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>

		<view v-if="farms_num==0" :style='{ height: mainHeight }'>
			<view class="flex align-center justify-center" style="height: 70%;width: 100%;">
				<view class="padding-bottom-xl">
					<view><image class='avatar-img' src='../../static/img/blank1.png'></image></view>
					<view class="text-center text-sm text-grey"><text >无任何场区</text></view>
					<view class="text-center padding-top">
						<button v-if="permission_edit && is_admin" @tap="onAdd()" class="cu-btn round lg bg-blue">
							<text class="cuIcon-forward"><text class="padding-left-sm">新增场区</text></text> 
						</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="groups_num>0">
			<view class="cu-bar solid-bottom ">
				<view class="action">
					
				</view>
				<view class="action">
					<view class="">
						<button v-if="permission_edit && is_admin" @tap="onAdd()" class="cu-btn bg-blue shadow sm margin-right-xxs">新增场区</button>
					</view>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: scrollHeight }' @scrolltoupper="" @scrolltolower="">
				<view class="padding">
					<uni-collapse :accordion="true">
						<uni-collapse-item  v-for="(item, index) in groups" :key="index" :title="item.group_name" :open="item.default" :show-animation="true" >
							
							<block v-for="(subItem, subIdx) in item.farms" :key="subIdx">
								<view class="item_panel margin-sm" hover-class="opcity" hover-stay-time="150" @tap="onTapFarm(subItem)">
									<view class="padding-sm flex align-center padding-top-lg">
										<view class="flex-treble text-left">
											<!-- <text class="iconfont icon-house text-gray "></text> -->
											<text class="cuIcon-locationfill  text-gray "></text>
											<text class=" text-icon-size   text-md padding-left-xs">{{subItem.farmname}}</text>
										</view>
										<view class="flex-sub text-right justify-center">
											<view class="">
												<view class='cu-tag radius sm line-olive'>{{subItem.area_name}}</view>
												<!-- <text class=" text-orange text-gray">{{item.area_name}}</text> -->
											</view>
										</view>
									</view>
							
									<view class="padding-left padding-right flex align-center text-gray">
										<view class="flex-sub">
											<view class="fl text-xs  text-left"><text class="cuIcon-people text-grey"></text> <text class="padding-left-xs text-gray"> 联系人</text></view>
										</view>
										<view class="flex-twice">
											<view class="fr text-xxs ">
												{{subItem.person}}
											</view>
										</view>
									</view>
									
									<view class="padding-left padding-right flex align-center text-gray">
										<view class="flex-sub">
											<view class="fl text-xs  text-left"><text class="cuIcon-phone text-grey"></text> <text class="padding-left-xs text-gray"> 联系电话</text></view>
										</view>
										<view class="flex-twice">
											<view class="fr text-xxs ">
												{{subItem.phone}}
											</view>
										</view>
									</view>
							
								</view>
							</block>
							
						</uni-collapse-item>
					</uni-collapse>
					
				</view>
				
				
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
				
				is_admin:false,
				
				groups:[],
				groups_num:-1,
		
				title: '',
				farms_num:-1,
				farms:[],

				permission_edit:false,
				permission_delete:false,
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 50 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 70 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("onShow")
			uni.setNavigationBarTitle({
				title: '集团场区列表'
			});
			this.checkPermission()
			//this.loadFarms()
			var that = this
			that.loading = true
			that.loadGroups().then(function(res){
				that.loading = false
				if (res.code >= 0) {

					var list = res.data
					that.groups_num = list.length
					
					if(list.length>0){
						list[0].default = true
						
						that.loading = true
						that.loadFarms().then(function(res1){
							that.loading = false
							if (res1.code >= 0) {
								var allFarms = res1.data
								//console.log(allFarms)
								
								for(var i=0;i<list.length;i++){
									var farms = []
									for(var x=0;x<allFarms.length;x++)
									{
										if(allFarms[x].group_name == list[i].group_name){
											farms.push(allFarms[x])
										}
									}
									//console.log(farms)
									list[i].farms = farms
								}
								
								//console.log(JSON.stringify(list))
								
							}
						})
					}
					
					that.groups = list
					
				}
			})
		},
		onLoad() {
			var is_admin = getApp().isAdmin()
			this.is_admin = is_admin
			console.log('is_admin=',this.is_admin)
		},
		methods: {
			onAdd(){
				console.info("onAdd")
				uni.navigateTo({
					url: "/pages/topo/farm_add"
				})
			},
			onTapFarm(item) {
				//console.info(JSON.stringify(item))
				uni.navigateTo({
					url: "/pages/topo/farm_detial?id=" + item.id +"&farmname="+item.farmname
				})
			},
			checkPermission(){
				var that = this
				that.permission_edit = false
				that.permission_delete = false
				getApp().getActions("/Topo/Tree").then(function(res){
					if (res.code >= 0) {
						console.info(res.data)
						that.actions = res.data
						
						for(var i=0;i<that.actions.length;i++){
							if(that.actions[i].action_id=='edit'){
								that.permission_edit = true
							}
							if(that.actions[i].action_id=='delete'){
								that.permission_delete = true
							}
						}
					}else{
						uni.showToast({
							title: '系统异常，请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			loadGroups() {
				var promise = new Promise(function(resolve, reject) {
					var token = getApp().getToken()
					api.myRequest({
						url: '/Api/Group',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authorization': 'Bearer ' + token + ''
						},
						data: {},
					}, false).then(res => {
						resolve(res);
					}).catch(err => {
						console.log(err)
						reject(err);
					})
				});
				return promise;
			},
			loadFarms() {
				var promise = new Promise(function(resolve, reject) {
					var token = getApp().getToken()
					api.myRequest({
						url: '/Api/Farm/List',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'Authorization': 'Bearer ' + token + ''
						},
						data: {},
					}, false).then(res => {
						resolve(res);
					}).catch(err => {
						console.log(err)
						reject(err);
					})
				});
				return promise;
			},
			loadFarms_bak(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Farm/List',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {

						var list = res.data
						//console.info(list)
						that.farms_num = list.length
						that.farms = list
					} else {

					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	/* uni-page-body {
		background-color: #f5f5f5 !important;
		min-height: 100% !important;
		height: auto !important;
	} */
	.avatar-img {
		width: 400rpx;
		height: 400rpx;
		opacity: .9;
		border-radius: 50%;
		align-self: center;
	}
	/* .item_panel {
		min-height: 200rpx;
		border-radius: 10rpx;
		background-color: rgba(100, 100, 100, 0.3);
		box-shadow: 0px 2.5px 5px  rgba(0, 0, 0, 0.25);
	} */
	.item_panel {
		min-height: 200rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		/* background-color: rgba(220, 220, 220, 0.6);
		box-shadow: 0px 2.5px 5px  rgba(100 100, 100, 0.9); */
		background-color: rgba(230, 230, 230, 0.3);
		box-shadow: 0 2px 4px rgba(100, 100, 155, 0.5);
	}
	.opcity{
		opacity: 0.6;
	}
</style>
